<script lang='ts' setup>
import { reactive, } from 'vue'

const state = reactive({ 
	
    tableData: [
		{
			id: 1, 
			job: '大螺丝',
			six: '女',
			money: '22',
			
		}
	] as Array<any>,
}) 

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean, 
	title: string
}>(), { 
	title: '',
	id: 0
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}


</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" :title="`${props.title}的岗位修改`" @close="closeDialog" style="width: 800px;" center>
            <section>
				<el-table :data="state.tableData" style="width: 100%" border> 
					<el-table-column label="岗位" prop="job" />
					<el-table-column label="调岗时间" prop="money" />
					<el-table-column label="调岗门店" prop="orderPrice" />
				</el-table>
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.power-list{
	border: 1px solid #ededed;
	
	h4{
		background-color: #f5f5f5;
		font-size: 16px;
		padding: 12px 10px;
		color: #999;
	}
	.power-item-list{
		display: flex;
		flex-wrap: wrap;
		padding  : 0 0 12px 12px;
	}
	.power-item{
		padding: 6px;
		border: 1px solid #ededed;
		margin: 12px 12px 0 0 ;
		margin-bottom: 0;
		color: #888;
		border-radius: 4px;
	}
}
</style>